<template tag="以下文档内容为hycli自动生成">
  <div style="height: 100%">
    <div style="margin:0.8rem;"><h5 style="display:inline">商城管理</h5><span style="margin-left: 0.5rem; color:#999"> 管理已上线商城</span>
    </div>
    <hr style="margin-top:0;color:#999"/>
<div class="query">
    
    <el-form :model="form_aaalp" inline >
        <!-- 日期控件个数： 1 -->
        <el-form-item>
            <!--多日期范围控件 -->
            <el-select v-model="form_aaalp.single_date_range_name" filterable placeholder="日期类型" style="width:120px;" class="prepend">
                <el-option
                v-for="item in multiQueryDateRange"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
        </el-select>
            <el-date-picker :shortcuts="shortcuts" style="width: 200px" v-model="form_aaalp.single_date_range_value" type="daterange" start-placeholder="开始日期"
                end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </el-form-item>
        <!--项目经理 下拉控件多选 -->
        <el-form-item>
            <el-select v-model="form_aaalp.pm" filterable clearable multiple collapse-tags  style="width: 140px"
            collapse-tags-tooltip placeholder="项目经理">
                <el-option v-for="item in pmList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
        </el-form-item>
        <!--基础运营 下拉控件多选 -->
        <el-form-item>
            <el-select v-model="form_aaalp.operation_owner" filterable clearable multiple collapse-tags  style="width: 140px"
            collapse-tags-tooltip placeholder="基础运营">
                <el-option v-for="item in operation_ownerList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
        </el-form-item>
        <!-- 控件个数：[{"index":36,"raw":"name","name":"name","cname":"Name","type":{"raw":"varchar(50)","name":"varchar","len":50,"dlen":0},"defValue":"","allowNull":false,"constraints":["l","le","v","c","u","q","lw(200)"],"desc":{"raw":"名称","name":"名称"}} {"index":37,"raw":"company","name":"company","cname":"Company","type":{"raw":"varchar(50)","name":"varchar","len":50,"dlen":0},"defValue":"","allowNull":false,"constraints":["l","le","v","c","u","q","fq"],"desc":{"raw":"所属公司","name":"所属公司"}}] -->
         <el-form-item>
            <el-input clearable style="width: 180px" v-model="form_aaalp.single_text_value" maxlength="32"
                placeholder="关键字" >
                <template #prepend>
                    <el-select v-model="form_aaalp.single_text_name" placeholder="查询类型" style="width:84px;">
                        <el-option
                        v-for="item in multiQueryText"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                      </el-select>
                  </template>
            </el-input>
        </el-form-item>

        <span class="ddl">
        </span>
        <el-form-item>
            <el-space wrap>
                <el-button type="primary" icon="Search" @click="onQuery(true)">查询</el-button>
                <el-button :type="$js.page.tagColor(0)"  icon="Plus"  @click="show_cmpnt_aaalt">添加</el-button>
            </el-space>
        </el-form-item>
        

        <!-- xtabs -->
        
        <div class="tabs">
            <el-tabs v-model="form_aaalp.status"  @tab-change="onQuery">
                <el-tab-pane name="" label="全部"  ></el-tab-pane>
                <el-tab-pane v-for="item in statusList" :name="item.value" :key="item.value" :label="item.name" 
                 ></el-tab-pane>
              </el-tabs>
        </div>

    </el-form>
</div>
<div>
   <aaalt ref="cmpnt_aaalt" @onsaved="onQuery"></aaalt>
   <aaalq ref="cmpnt_aaalq" @onsaved="onQuery"></aaalq>
   <aaalr ref="cmpnt_aaalr" @onsaved="onQuery"></aaalr>
   <aaals ref="cmpnt_aaals" @onsaved="onQuery"></aaals>
</div>
<div class="list">
    <el-table :data="dataList_aaalp"
    
    v-loading="conf.loading" stripe  style="width: 100%;height:calc(100vh - 160px)"
         empty-text="无数据">le
<el-table-column width="24px" type="expand">
    <template #default="view">
        <el-row :gutter="24">
            <el-col :span="5" class="text-right" style="min-height:26px">编号:</el-col>
            <el-col :span="7" v-text="view.row.le_sm_id" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">名称:</el-col>
            <el-col :span="7" v-html="view.row.le_name||'-'" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">所属公司:</el-col>
            <el-col :span="7" v-html="view.row.le_company||'-'" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">商城:</el-col>
            <el-col :span="7" style="min-height:26px"
            >
                <el-link target="_blank" type="primary" :href="view.row.le_mall_address" v-if="view.row.le_mall_address" :title="view.row.le_mall_address">查看</el-link>
            </el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">运营系统:</el-col>
            <el-col :span="7" style="min-height:26px"
            >
                <el-link target="_blank" type="primary" :href="view.row.le_system_address" v-if="view.row.le_system_address" :title="view.row.le_system_address">查看</el-link>
            </el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">供货商:</el-col>
            <el-col :span="7" style="min-height:26px"
            >
                <el-link target="_blank" type="primary" :href="view.row.le_supplier_address" v-if="view.row.le_supplier_address" :title="view.row.le_supplier_address">查看</el-link>
            </el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">知识产权:</el-col>
            <el-col :span="7" v-text="view.row.ipr_label" style="min-height:26px"
              :class="$js.page.colorful(view.row.ipr,'ipr')" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">部署方式:</el-col>
            <el-col :span="7" v-text="view.row.deploy_type_label" style="min-height:26px"
              :class="$js.page.colorful(view.row.deploy_type,'deploy_type')" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">系统分类:</el-col>
            <el-col :span="7" v-text="view.row.system_category_label" style="min-height:26px"
              :class="$js.page.colorful(view.row.system_category,'system_category')" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">项目类型:</el-col>
            <el-col :span="7" v-text="view.row.project_type_label" style="min-height:26px"
              :class="$js.page.colorful(view.row.project_type,'project_type')" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">项目经理:</el-col>
            <el-col :span="7" v-text="view.row.pm_label" style="min-height:26px"
              :class="$js.page.colorful(view.row.pm,'pm')" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">基础运营:</el-col>
            <el-col :span="7" v-text="view.row.operation_owner_label" style="min-height:26px"
              ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">供货类型:</el-col>
            <el-col :span="7" v-text="view.row.supply_type_label" style="min-height:26px"
              :class="$js.page.colorful(view.row.supply_type,'supply_type')" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">备注:</el-col>
            <el-col :span="7" v-html="view.row.le_memo||'-'" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">创建人:</el-col>
            <el-col :span="7" v-text="view.row.creator_label" style="min-height:26px"
              ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">创建时间:</el-col>
            <el-col :span="7" v-text="view.row.le_create_time" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">状态:</el-col>
            <el-col :span="7" v-text="view.row.status_label" style="min-height:26px"
              ></el-col>
        </el-row>
    </template>
</el-table-column>
        
        	<!--sm_id text -->
        <el-table-column  show-overflow-tooltip    align="center" label="编号" >
            <template #default="scope">
                  <span>{{ scope.row.sm_id||'-' }}</span>
              </template>
        </el-table-column>
        	<!--name text -->
        <el-table-column  show-overflow-tooltip   min-width="200"   align="center" label="名称" >
            <template #default="scope">
                  <span>{{ scope.row.name||'-' }}</span>
              </template>
        </el-table-column>
        	<!--company text -->
        <el-table-column  show-overflow-tooltip    align="center" label="所属公司" >
            <template #default="scope">
                  <span>{{ scope.row.company||'-' }}</span>
              </template>
        </el-table-column>
        	<!--mall_address link -->
        <el-table-column     align="center" label="商城">
            <template #default="scope">
                <el-link target="_blank" type="success" :href="scope.row.mall_address" v-if="scope.row.mall_address" :title="scope.row.mall_address">查看</el-link>
            </template>
        </el-table-column>
        	<!--system_category select -->
        <el-table-column  :filters="system_categoryList" :filter-method="$js.page.columnfilter" column-key="system_category"     prop="system_category" align="center" label="系统分类">
            <template #default="scope">
                <span :class="$js.page.colorful(scope.row.system_category,'system_category')" 
                    v-text="scope.row.system_category_label"></span>
            </template>
        </el-table-column>
        	<!--pm select -->
        <el-table-column  :filters="pmList" :filter-method="$js.page.columnfilter" column-key="pm"     prop="pm" align="center" label="项目经理">
            <template #default="scope">
                <span :class="$js.page.colorful(scope.row.pm,'pm')" 
                    v-text="scope.row.pm_label"></span>
            </template>
        </el-table-column>
        	<!--operation_owner select -->
        <el-table-column  :filters="operation_ownerList" :filter-method="$js.page.columnfilter" column-key="operation_owner"     prop="operation_owner" align="center" label="基础运营">
            <template #default="scope">
                <span 
                    v-text="scope.row.operation_owner_label"></span>
            </template>
        </el-table-column>

<el-table-column fixed="right" align="center" label="操作" width="168">
    <template #default="scope">
        <div class="opts">
            <el-button   type="text" @click="show_cmpnt_aaalq(scope.row)" >详情 </el-button>
            <el-button   type="text" @click="show_cmpnt_aaalr(scope.row)" >修改 </el-button>
            <el-button   type="text" @click="show_cmpnt_aaals(scope.row)" >删除 </el-button>
        </div>
    </template>
</el-table-column>
    </el-table>
    <el-pagination :currentPage="form_aaalp.pi" :page-size="form_aaalp.ps"
        style="position: absolute; right: 30px;bottom:6px;" :page-sizes="[10,15,20,30, 50, 100]" :background="false" small
        layout="total,sizes,prev, pager, next, jumper" :total="total_aaalp" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
</div>
  </div>
</template>
<script>
// 添加
import aaalt from "@/views/ws/sys/sys_management.add"
// 详情
import aaalq from "@/views/ws/sys/sys_management.view"
// 修改
import aaalr from "@/views/ws/sys/sys_management.edit"
// 删除
import aaals from "@/views/ws/sys/sys_management.cnfrm"



export default {
components: {
    aaalt,
    aaalq,
    aaalr,
    aaals,
},
data() {
  return {
    shortcuts: this.$js.page.latestDays(),
    cmpnt_funcs:{},
    conf: {
      loading: false,
      progressColor: this.$theia.env.conf.progress || []
    },
    ganttIdx: -1,
        form_aaalp: {
            pi: 1,
            ps: 15,
            disabled:false,
            single_date_range_name:"",
            single_date_range_value:[],
            single_text_name:"",
            single_text_value:"",
            name:"",
            company:"",
            pm:[],
            operation_owner:[],
            create_time:"",
            status:"",
            },
            iprList:[],
            deploy_typeList:[],
            system_categoryList:[],
            project_typeList:[],
            pmExts:[],
            pmList:[],
            operation_ownerExts:[],
            operation_ownerList:[],
            supply_typeList:[],
            creatorList:[],
            statusList:[],
            dataList_aaalp:[],
            multiQueryDateRange:[{label:"创建时间",value:"create_time"},],
            multiQueryText:[{label:"名称",value:"name"},{label:"所属公司",value:"company"},],
            total_aaalp:0,
            note_dataList:[],
};
  },
mounted() {
  this.loadEnums_aaalp()
  this.form_aaalp.single_date_range_name = (this.multiQueryDateRange[0]||{}).value
  this.form_aaalp.single_text_name = (this.multiQueryText[0]||{}).value
  this.cmpnt_funcs["aaalt"] = this.show_cmpnt_aaalt
  this.cmpnt_funcs["aaalq"] = this.show_cmpnt_aaalq
  this.cmpnt_funcs["aaalr"] = this.show_cmpnt_aaalr
  this.cmpnt_funcs["aaals"] = this.show_cmpnt_aaals

  this.form_aaalp = Object.assign(this.form_aaalp,this.$route.params)
    },
 watch: {
    '$route' () {
      this.form_aaalp = Object.assign(this.form_aaalp,this.$route.params)
      this.onQuery();//我的初始化方法
    }
  },
methods: {
  ganttChange(id) {
      this.ganttIdx = id
    },

queryData_aaalp(mform = {},nform={}){
    //构建查询参数
    let queryForm = Object.assign({},this.form_aaalp)
    queryForm = Object.assign(queryForm,nform||{})
    
    //处理多个日期选择
    queryForm[this.form_aaalp.single_date_range_name] = this.form_aaalp.single_date_range_value
    queryForm[this.form_aaalp.single_text_name] = this.form_aaalp.single_text_value
   
    //处理日期范围选择
      queryForm.pm = (queryForm.pm||[]).join(",")
      queryForm.operation_owner = (queryForm.operation_owner||[]).join(",")
      queryForm.start_create_time = null
      queryForm.end_create_time = null
    if(queryForm.create_time && queryForm.create_time.length > 1){
      queryForm.start_create_time = queryForm.create_time[0]
      queryForm.end_create_time = queryForm.create_time[1]
    }

    queryForm[this.form_aaalp.single_date_range_name] = null
    queryForm.single_date_range_value = null
    queryForm.single_date_range_name = null

    queryForm.single_text_value = null
    queryForm.single_text_name = null
 
    //处理关联表sys_management sys_management 
   
    //发送查询请求
    let that = this
    that.conf.loading = true
    //构建统计查询
  //数据查询
  this.$theia.http.get("/ws/sys/management/query",queryForm).then(res=>{
      if((res.items||[]).length < (queryForm.ps||10)){
        that.form_aaalp.disabled = true
      }
      that.conf.loading = false
      that.dataList_aaalp = res.items||[]
      that.total_aaalp = res.count
      that.resetItemData_aaalp(that,that.dataList_aaalp)
    });
  },

  resetItemData_aaalp(that,lst){
    lst.forEach(item => {
      item.__raw = Object.assign({}, item)
    item.ipr_label = that.$theia.enum.getName("ipr",item.ipr)
    item.deploy_type_label = that.$theia.enum.getName("deploy_type",item.deploy_type)
    item.system_category_label = that.$theia.enum.getName("system_category",item.system_category)
    item.project_type_label = that.$theia.enum.getName("project_type",item.project_type)
    item.pm_label = that.$theia.enum.getName("operprs",item.pm)
    item.operation_owner_label = that.$theia.enum.getName("operprs",item.operation_owner)
    item.supply_type_label = that.$theia.enum.getName("supply_type",item.supply_type)
    item.creator_label = that.$theia.enum.getName("user_account",item.creator)
    item.status_label = that.$theia.enum.getName("ustatus",item.status)
    item.sm_id_progress = item.sm_id
    item.name_progress = item.name
    item.company_progress = item.company
    item.mall_address_progress = item.mall_address
    item.system_address_progress = item.system_address
    item.supplier_address_progress = item.supplier_address
    item.ipr_progress = item.ipr
    item.deploy_type_progress = item.deploy_type
    item.system_category_progress = item.system_category
    item.project_type_progress = item.project_type
    item.pm_progress = item.pm
    item.operation_owner_progress = item.operation_owner
    item.supply_type_progress = item.supply_type
    item.memo_progress = item.memo
    item.creator_progress = item.creator
    item.create_time_progress = item.create_time
    item.status_progress = item.status
    item.le_sm_id = item.sm_id
    item.le_name = item.name
    item.le_company = item.company
    item.le_mall_address = item.mall_address
    item.le_system_address = item.system_address
    item.le_supplier_address = item.supplier_address
    item.le_ipr = item.ipr
    item.le_deploy_type = item.deploy_type
    item.le_system_category = item.system_category
    item.le_project_type = item.project_type
    item.le_pm = item.pm
    item.le_operation_owner = item.operation_owner
    item.le_supply_type = item.supply_type
    item.le_memo = item.memo
    item.le_creator = item.creator
    item.le_create_time = item.create_time
    item.le_status = item.status
    if(item.children){
      that.resetItemData_aaalp(that,item.children)
    }
  });
  },
    loadEnums_aaalp(){
        //项目经理
        this.pmList = this.$theia.enum.get("operprs","","" ,false,"")
        //基础运营
        this.operation_ownerList = this.$theia.enum.get("operprs","","" ,false,"")
        //状态
        this.statusList = this.$theia.enum.get("ustatus","","" ,false,"")
        //系统分类
        this.system_categoryList = this.$theia.enum.get("system_category","","" ,false,"")
        //项目经理
        this.pmList = this.$theia.enum.get("operprs","","" ,false,"")
        //基础运营
        this.operation_ownerList = this.$theia.enum.get("operprs","","" ,false,"")
    },

  handleSizeChange(ps){
    this.form_aaalp.ps = ps
    this.onQuery(true)
  },
  handleCurrentChange(pi){
    this.form_aaalp.pi = pi
    this.onQuery()
  },
  onQuery(refresh){
    if(refresh){
      this.form_aaalp.pi = 1
    }
    this.queryData_aaalp ()
  },
show_cmpnt(cmd,row){
  if(this.cmpnt_funcs[cmd]){
    this.cmpnt_funcs[cmd](row)
  }
},
  //详情
  show_cmpnt_aaalq(fm = {}){
    let query = {} 
    query.sm_id = fm.sm_id|| fm.le_sm_id 
    query.name = fm.name|| fm.le_name 
    query.company = fm.company|| fm.le_company 
    query.mall_address = fm.mall_address|| fm.le_mall_address 
    query.system_address = fm.system_address|| fm.le_system_address 
    query.supplier_address = fm.supplier_address|| fm.le_supplier_address 
    query.ipr = fm.ipr|| fm.le_ipr 
    query.deploy_type = fm.deploy_type|| fm.le_deploy_type 
    query.system_category = fm.system_category|| fm.le_system_category 
    query.project_type = fm.project_type|| fm.le_project_type 
    query.pm = fm.pm|| fm.le_pm 
    query.operation_owner = fm.operation_owner|| fm.le_operation_owner 
    query.supply_type = fm.supply_type|| fm.le_supply_type 
    query.memo = fm.memo|| fm.le_memo 
    query.creator = fm.creator|| fm.le_creator 
    query.create_time = fm.create_time|| fm.le_create_time 
    query.status = fm.status|| fm.le_status 
    query.sm_id = fm.sm_id

      //2023.4.18添加---

    query.$title="详情"
    this.$refs.cmpnt_aaalq.show(query)
  },
  //添加
  show_cmpnt_aaalt(fm = {}){
    let query = {} 
    query.name = fm.name|| fm.le_name 
    query.company = fm.company|| fm.le_company 
    query.mall_address = fm.mall_address|| fm.le_mall_address 
    query.system_address = fm.system_address|| fm.le_system_address 
    query.supplier_address = fm.supplier_address|| fm.le_supplier_address 
    query.ipr = fm.ipr|| fm.le_ipr 
    query.deploy_type = fm.deploy_type|| fm.le_deploy_type 
    query.system_category = fm.system_category|| fm.le_system_category 
    query.project_type = fm.project_type|| fm.le_project_type 
    query.pm = fm.pm|| fm.le_pm 
    query.operation_owner = fm.operation_owner|| fm.le_operation_owner 
    query.supply_type = fm.supply_type|| fm.le_supply_type 
    query.memo = fm.memo|| fm.le_memo 
    query.status = fm.status|| fm.le_status 
    query.sm_id = fm.sm_id

      //2023.4.18添加---

    query.$title="添加"
    this.$refs.cmpnt_aaalt.show(query)
  },
  //修改
  show_cmpnt_aaalr(fm = {}){
    let query = {} 
    query.name = fm.name|| fm.le_name 
    query.company = fm.company|| fm.le_company 
    query.mall_address = fm.mall_address|| fm.le_mall_address 
    query.system_address = fm.system_address|| fm.le_system_address 
    query.supplier_address = fm.supplier_address|| fm.le_supplier_address 
    query.ipr = fm.ipr|| fm.le_ipr 
    query.deploy_type = fm.deploy_type|| fm.le_deploy_type 
    query.system_category = fm.system_category|| fm.le_system_category 
    query.project_type = fm.project_type|| fm.le_project_type 
    query.pm = fm.pm|| fm.le_pm 
    query.operation_owner = fm.operation_owner|| fm.le_operation_owner 
    query.supply_type = fm.supply_type|| fm.le_supply_type 
    query.memo = fm.memo|| fm.le_memo 
    query.status = fm.status|| fm.le_status 
    query.sm_id = fm.sm_id

      //2023.4.18添加---

    query.$title="修改"
    this.$refs.cmpnt_aaalr.show(query)
  },
  //删除
  show_cmpnt_aaals(fm = {}){
    let query = {} 
    query.sm_id = fm.sm_id|| fm.le_sm_id 
    query.sm_id = fm.sm_id

      //2023.4.18添加---

    query.$title="删除"
    this.$refs.cmpnt_aaals.show_aaals(query)
  },
},
};
</script>
<style>
.el-dialog{
  border-radius:5px !important
}
</style>
<style scoped>
.el-form-item {
  margin-right: 10px !important;
}

.opts .el-button--small {
  margin-left: 0px;
  padding-left: 0px;
  margin-right: 4px;
}

/deep/.el-table td.el-table__cell div {
  vertical-align: middle;
}
/deep/.el-button+.el-dropdown{
  margin-left:0px;
}
/deep/.el-button+.el-button{
  margin-left:0px;
}
.el-button{
  padding-left: 6px !important;
  padding-right: 6px !important;
}
.blist {
  margin-bottom: 8px;
  width: 100%;
}

.blist .el-radio-group {
  margin-right: 8px;
}

.ddl {
  margin-bottom: 8px;
  width: 100%;

}

.ddl .el-dropdown {
  margin-right: 8px;
}

.listbar {
  margin-bottom: 8px;
  text-align: center;
}
 .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  font-size: 0.65rem;
}
/deep/.el-button--small{
  padding: 5px 4px;
}

.prepend /deep/.el-input__wrapper{
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}
.prepend+/deep/.el-date-editor{
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  border-left:0;
}

</style>